<template>
    <div class="bz-progress-block">
        <div class="bz-ring-progress-background"></div>
        <div class="bz-ring-progress" :class="calcClip">
            <div class="bz-precess" :style="calcRotate"></div>
            <div class="bz-precess-b" :style="calcRotateB"></div>
        </div>
        <div class="bz-ring-progress-b"></div>
        <div class="bz-ring-progress-foreground">
            <div class="bz-percentage" v-if="percentage > 0">{{percentage}}%</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Ring",
        emits: ['complete', 'change'],
        props: {
            refName: {
                type: String,
                default: 'scrollable'
            },
        },
        data() {
            return {
                isEmit: false,
                percentage: 0,
                rotate: 0,
            };
        },
        computed: {
            calcRotate() {
                return {transform: `rotate(${this.rotate > 180 ? 180 : this.rotate}deg)`}
            },
            calcRotateB() {
                return {
                    transform: `rotate(${this.rotate <= 180 ? 180 : (this.rotate - 180)}deg)`,
                    visibility: this.rotate > 180 ? 'visible' : 'hidden'
                }
            },
            calcClip() {
                return this.rotate > 180 ? '' : 'bz-ring-progress-clip';
            }
        },
        methods: {
            onscroll(e) {
                let c = this.$parent.$refs[this.refName];
                let scrollTop = c.scrollTop;
                let docHeight = c.scrollHeight;
                let winHeight = window.innerHeight;
                let percentage = scrollTop / (docHeight - winHeight);
                percentage = percentage > 1 ? 1 : percentage;
                this.percentage = (percentage * 100).toFixed(2);
                this.rotate = Math.floor(percentage * 360);
                this.$emit('change', this.percentage);
                if ( percentage >= 1 && !this.isEmit){
                    this.$emit('complete');
                    this.isEmit = true;
                }
            },
        },
        mounted() {
            console.log(this.$parent);
            window.addEventListener('scroll', this.onscroll, true)
        },
        unmounted() {
            window.removeEventListener('scroll', this.onscroll, true);
        }
    }
</script>

<style lang="less" scoped>
    @background: #ff5a37;
    @progress: #5cff4a;
    @p-radius: 28px;
    @p-block-radius: 32px;
    @p-center-radius: 24px;
    .bz-progress-block {
        position: fixed;
        left: 100px;
        top: 100px;

        .bz-ring-progress-background {
            position: absolute;
            width: @p-block-radius * 2;
            height: @p-block-radius * 2;
            border-radius: 50%;
            background: @background;
        }

        .bz-ring-progress-foreground {
            position: absolute;
            width: @p-center-radius * 2;
            height: @p-center-radius * 2;
            left: @p-block-radius - @p-center-radius;
            top: @p-block-radius - @p-center-radius;
            border-radius: 50%;
            background: @background;
            display: flex;
            justify-content: center;
            align-items: center;

            .bz-percentage {
                color: indianred;
                font-size: 10px;
                font-weight: bolder;
            }
        }

        .bz-ring-progress-b {
            position: absolute;
            left: @p-block-radius - @p-radius;
            top: @p-block-radius - @p-radius;
            width: @p-radius * 2;
            height: @p-radius * 2;
            background: rgba(255, 255, 255, .3);
            border-radius: 50%;
        }

        .bz-ring-progress-clip {
            clip: rect(0, @p-radius * 2, @p-radius * 2, @p-radius);
        }

        .bz-ring-progress {
            position: absolute;
            left: @p-block-radius - @p-radius;
            top: @p-block-radius - @p-radius;
            width: @p-radius * 2;
            height: @p-radius * 2;
            border-radius: 50%;
            background: @background;

            .bz-precess {
                position: absolute;
                width: @p-radius * 2;
                height: @p-radius * 2;
                clip: rect(0, @p-radius, @p-radius * 2, 0);
                border-radius: 50%;
                background: @progress;
            }

            .bz-precess-b {
                position: absolute;
                width: @p-radius * 2;
                height: @p-radius * 2;
                clip: rect(0, @p-radius * 2, @p-radius * 2, @p-radius);
                border-radius: 50%;
                background: @progress;
            }
        }
    }

</style>